<template>
    <div>
        <el-table v-loading='loading' :data='list'>
            <el-table-column v-for='(item,index) in tableColumns' :key='index' 
                :prop='item.param' :label='item.label' :width="item.width ? item.width : ''">
                <template slot-scope='scope'>
                    <span v-if=' item.type == "userImages" '>
                        <img style="width:46px; height:46px; border-radius:30px;" :src='scope.row[item.param]'>
                    </span>
                    <span v-else-if=' item.type == "itemImages" '>
                        <img style="width:60px; height:60px;" :src='scope.row[item.param]'>
                    </span>
                    <span v-else-if='item.render' v-html='item.render(scope.row)' ></span>
                    <span v-else>{{scope.row[item.param]}}</span>
                </template>
            </el-table-column>
            <el-table-column v-if='tableOption' :label='tableOption.label' align="center" class-name="small-padding fixed-width">
                <template slot-scope='scope'>
                    <el-button v-for='(item,index) in tableOption.options' :key="index" 
                    size='mini' :type='item.text' :icon='item.icon' @click='handleButton(item.methods,scope.row,scope.$index)' >{{item.label}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default{
    props:{
        //加载
        loading:{
            type:Boolean,
            default:false
        },
        //数据
        list:{
            type:Array,
            default:()=> []
            
        },
        //表头数据
        tableColumns:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        //操作
        tableOption:{
            type:Object,
            default:()=>{}
        },
        color:String,
    },
    methods:{
        handleButton(methods,row,index){
            this.$emit('clickButton',{methods:methods,row:row,index:index})
        }
    }
}
</script>
<style>

</style>
